<template>
  <div class="page" style="height: calc(100vh - 125px)">
    <div class="page-brand">评论管理</div>
    <div class="container g-card rel">
      <div class="query-box">
        <div class="prefix-form-item">
          <div class="prefix-label">全部评论</div>
          <el-input
            :value="99"
            readonly
            class="color-blue bold"
            placeholder="输入剪辑任务名称"
            style="width: 1rem"
          />
        </div>
        <div
          class="prefix-form-item nobrr"
          style="display: grid; grid-template-columns: 1rem 1rem 0.7rem"
        >
          <div class="prefix-label">评论线索</div>
          <el-input
            :value="54"
            readonly
            class="color-blue bold"
            style="width: 1rem"
            placeholder="输入剪辑任务名称"
          />
          <div class="suffix-label">设置</div>
        </div>
        <div class="prefix-form-item">
          <div class="prefix-label">回复状态</div>
          <el-select
            v-model="queryForm.status"
            placeholder="请选择"
            style="width: 150px"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="prefix-form-item">
          <div class="prefix-label">选择账号</div>
          <el-select
            v-model="queryForm.status"
            placeholder="请选择"
            style="width: 150px"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="flex-e align-center">
          <el-button type="primary" size="small" style="margin-right: 0.1rem">
            <i class="el-icon-search" />搜索
          </el-button>
          <el-button size="small">
            <i class="el-icon-refresh-left" />重置
          </el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 100%"
          size="small"
          header-row-class-name="mao-table-head"
        >
          <el-table-column prop="index" label="序号" width="80px">
            1
          </el-table-column>

          <el-table-column prop="avatar" label="用户头像" width="100px">
            <img
              src="@/assets/images/auth/avatar.png"
              alt=""
              class="avatar"
            >
          </el-table-column>
          <el-table-column prop="comment" label="评论内容">
            哈喽您好老师 您有做好的线上课...
          </el-table-column>
          <el-table-column prop="reply" label="回复状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status!=='待剪辑'" class="color-blue">已回复</div>
              <div v-else class="color-red">未回复</div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="评论时间">
            2024-03-28 10:54:11
          </el-table-column>
          <el-table-column prop="todo" label="操作">
            <el-button type="primary" size="small">查看视频</el-button>
            <el-button type="primary" size="small">回复评论</el-button>
          </el-table-column>
        </el-table>
        <div class="flex-e pagination-box">
          <el-pagination
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CreationSmart',
  data() {
    return {
      page: 1,
      total: 3,
      pageSize: 5,
      tableData: [
        {
          name: '326门店剪辑',
          status: '剪辑中',
          num: 22,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['复制', '删除']
        },
        {
          name: '326门店剪辑',
          status: '待剪辑',
          num: 0,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '复制']
        },
        {
          name: '326门店剪辑',
          status: '已完成',
          num: 45,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '查看成片', '复制']
        },
        {
          name: '326门店剪辑',
          status: '剪辑中',
          num: 22,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['复制', '删除']
        },
        {
          name: '326门店剪辑',
          status: '待剪辑',
          num: 0,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '复制']
        },
        {
          name: '326门店剪辑',
          status: '已完成',
          num: 45,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '查看成片', '复制']
        }
      ],
      statusList: [],
      queryForm: {
        name: '',
        status: '',
        dateRange: []
      },
      cardList: [
        {
          img: require('@/assets/images/dashboard/card-icon1.png'),
          name: '智能剪辑'
        },
        {
          img: require('@/assets/images/dashboard/card-icon3.png'),
          name: '爆款剪辑'
        },
        {
          img: require('@/assets/images/dashboard/card-icon2.png'),
          name: '脚本剪辑'
        },
        {
          img: require('@/assets/images/dashboard/card-icon7.png'),
          name: '图文创作'
        }
      ],
      tagList: [{ name: '昨日' }, { name: '7天' }, { name: '30天' }],
      valueList: [
        { name: '剪辑任务数', value: '99' },
        { name: '剪辑视频数', value: '65810' },
        { name: '剪辑图片数', value: '125' }
      ]
    }
  },
  mounted() {},
  methods: {
    openAddModal() {
      this.$nextTick(() => {
        this.$refs.addModal.open()
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.prefix-form-item{
  margin-right: 30px;
}
.avatar {
  width: 40px;
  height: 40px;
}
.suffix-label {
  border: 1px solid #a6a6a6;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.query-box {
  display: flex;
  align-items: center;
  // display: grid;
  // grid-template-columns: 16% 20% 20% 20% 1fr;
  // grid-column-gap: 15px;
  margin-top: 20px;
}
.tab-item {
  .icon {
    width: 40px;
    height: 40px;
    margin-right: 0.1rem;
  }
  .tab-item-name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
}
.grid-64 {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-column-gap: 30px;
  margin-top: 12px;
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 30px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}
</style>
